<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../JS/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../JS/vue-router.js"></script>
    <style>
        .router-link-active{
            color: red;
        }
        
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateX(30px);
        }
    
        .v-enter-active,
        .v-leave-active {
          position: absolute;
          transition: all 0.3s ease;
        }
      </style>
</head>
<body>
    <div id="app">
       <router-link to="/login">去登录</router-link>
       <router-link to="/register">去注册</router-link>
       <transition mode="out-in">
        <router-view></router-view>
       </transition>
    </div>
    
    <template id="logintem">
        <p>登录组件</p>
    </template>
    <template id="registertem">
        <p>注册组件</p>
    </template>
    
    <script>
        // 创建2个组件
        var login = Vue.component('login',{
            template:'#logintem'
        })
        var register = Vue.component('register',{
            template:'#registertem'
        })
        // 创建路由
        // 当访问localhost：8080/login的时候，切换到login组件
        // 注册组件同理
        var router = new VueRouter({
            routes:[
                {path:'/login',component:login},
                {path:'/register',component:register},
            ]
        })

        let app = new Vue({
            el: '#app',
            router:router
        })
    </script>
</body>
</html>